<#assign pageTitle="${course.courseName!} - 学习"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/course.css?20220210"/>
    <style>
        body{
            background-color: #fff;
            height: 100%;
            overflow: hidden;
        }
    </style>
</#assign>
<#assign pageContent>
    <div class="header-nav-bar">
        <van-nav-bar
                title="${course.courseName!}"
                left-text="返回"
                right-text="首页"
                left-arrow
                @click-left="location.href='/course/view/${course.courseId!}.html';"
                @click-right="location.href='/index.html';"
                fixed
                placeholder
        />
    </div>
    <div class="video-content" id="video-content">
        <video id="videoUrl" controls="" autoplay="" name="media">
            <source src="" type="video/mp4">
        </video>
    </div>
    <van-tabs class="video-menu">
        <van-tab title="目录">
            <div class="course-view-step">
                <dl class="step-item" v-for="item in nodeList">
                    <dt v-if="item.nodeType == 0">{{item.name}}</dt>
                    <dd v-for="item2 in item.children">
                        <a v-if="item2.parentId == item.nodeId" :class="nodeId == item2.nodeId?'active':''" @click="toPlay(item2.nodeId)">
                            <span  class="step-title ">{{item2.name}}</span>
                            <span :class="nodeId == item2.nodeId?'step-state state-over':'step-state'"></span>
                        </a>
                    </dd>
                </dl>
            </div>
        </van-tab>
        <van-tab title="资料">
            <div class="course-view-step">
                <dl class="step-item file-item">
                    <dd v-for="item in fileList">
                        <a href="#">
                            <span class="step-title">{{item.title}}</span>
                            <span class="step-btn" @click="downloadFile(item.id, item.title)">点击下载</span>
                        </a>
                    </dd>
                </dl>
            </div>
        </van-tab>
    </van-tabs>
    <van-dialog v-model="buyDialog" @confirm="confirmBuy" theme="round-button" confirm-button-text="确认购买"  close-on-click-overlay="false">
        <#include "../course/course-payment.ftl" />
    </van-dialog>
</#assign>
<#assign pageScript>
    <script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
    <script>
        //设置章节目录的高度
        var oldOnload = window.onload;
        window.onload = function () {
            if (typeof oldOnload === 'function') {
                oldOnload();
            }
            var videoHeight = document.getElementById('video-content').offsetHeight;
            var menuHeight = document.documentElement.clientHeight - videoHeight - 88;
            document.querySelector(".van-tabs__content").style.height = menuHeight + 'px'
        };
        var courseId = ${course.courseId};
        var nodeId = ${courseNode.nodeId};
        var isBuy = ${isBuy?c};
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    nodeList: [],
                    nodeId: nodeId,
                    buyDialog:false,
                    fileList: [],
                }
            },
            created() {
                this.toNodeList();
                this.toPlay(nodeId);
            },
            methods: {
                toPlay(nodeId) {
                    var that = this;
                    var params = new URLSearchParams();
                    params.append("nodeId", nodeId);
                    axios.post('/ajax/course/play/address.json', params).then(function (json) {
                        if (json.data.code === 0) {
                            var player = document.getElementById('videoUrl');
                            player.src = json.data.msg;
                            player.play();
                            that.nodeId = nodeId;
                            //播放记录
                            if(isBuy){
                                axios.post('/ajax/course/study/times.json', params).then(function (json) {
                                    if (json.data.code === 0) {
                                        console.log("ok")
                                    }
                                });
                            }
                        } else {
                            that.buyDialog = true;
                        }
                    });
                },
                toNodeList(){
                    var that = this;
                    axios.get('/ajax/course/node/list.json', {
                        params: {
                            courseId: courseId
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            that.nodeList = json.data.data;
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                toFileList(){
                    var that = this;
                    axios.get('/ajax/course/file/list.json', {
                        params: {
                            courseId: courseId
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            that.fileList = json.data.data;
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                downloadFile(id,name){
                    var that = this;
                    axios.get('/course/download.json?id=' + id).then(function (json) {
                        if (json.data.code === 0) {
                            var link = document.createElement("a");
                            link.href = json.data.data;
                            link.download = name;
                            link.click();
                            window.URL.revokeObjectURL(link.href);
                        } else {
                            that.$dialog.alert({
                                title:json.data.msg
                            });
                        }
                    });
                },
                confirmBuy() {
                    let that = this;
                    var data = new FormData();
                    data.append("otherId", courseId);
                    data.append("orderType", "COURSE");
                    data.append("payType", "WXPAY");
                    axios.post('/order/create.json', data).then(function (json) {
                        if (json.data.code === 0) {
                            //判断是否扣款完成
                            if (json.data.msg === 'complete') {
                                window.location.reload();
                            } else {
                                setInterval("checkPayed('" + json.data.data.orderNo + "')", 5000);
                                if (json.data.data.payChannel === "JSAPI" && typeof WeixinJSBridge != "undefined") {
                                    toWxJSAPI(json.data.data);
                                } else {
                                    window.location.href = json.data.data.payUrl;
                                }
                            }
                        } else {
                            that.$toast.fail('支付失败，' + json.data.msg);
                        }
                    }).catch(function (error) {
                        that.$toast.fail(error);
                    });
                },
            }
        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />